<template>
  <div class="share-wrapper">
    <n-card
      style="width: 350px"
      title="分享地图"
      :bordered="false"
      size="small"
      role="dialog"
      aria-modal="true"
    >
      <span class="desc"
        >视图开启分享后，对方可查看该视图下的数据。如您对视图进行了隐藏列、筛选等配置，对方只能看到配置后的数据</span
      >
      <div class="content">
        <div class="content-top">
          <span>开启分享链接</span>
          <n-switch v-model:value="status" class="switch"></n-switch>
          <text>{{ status ? "已开启" : "未开启" }}</text>
        </div>
        <di v-if="status">
          <div class="link">
            <div class="link-content">
              <n-input v-model:value="link"></n-input>
              <n-button type="primary" strong secondary>复制</n-button>
            </div>
          </div>
          <n-qr-code :value="link" style="margin-bottom: 8px" />
          <div class="radio">
            <n-checkbox v-model:checked="usePassword" name="开启密码访问">
              开启密码访问
            </n-checkbox>
          </div>

          <div v-if="usePassword" class="password">
            <n-input
              v-model:value="password"
              size="small"
              placeholder="请输入密码"
            >
              <template #prefix> 密码: </template>
            </n-input>
          </div>
          <div class="radio">
            <n-checkbox v-model:checked="enitreProj" name="共享完整项目">
              共享完整项目
            </n-checkbox>
          </div>
        </di>
      </div>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const status = ref(true);
const link = ref(
  "http://1.116.178.22/editor/#/editor?id=3cc18de0-9e64-11ee-b7f5-07df68be1add"
);
const usePassword = ref(true);
const password = ref("");
const enitreProj = ref(false);
watch(
  () => usePassword.value,
  (val) => {
    if (val) {
      password.value = randomString(6);
    }
  },
  {
    immediate: true,
  }
);
function randomString(length) {
  let result = "";
  const characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  const charactersLength = characters.length;

  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }

  return result;
}
onMounted(() => {
  link.value = `http://1.116.178.22/editor/#/preview?id=${route.query.id}`;
});
</script>

<style lang="scss" scoped>
.desc {
  font-size: 12px;
}
.content {
  background-color: #323131;
  padding: 12px;
  border-radius: 4px;
  margin-top: 12px;
  .content-top {
    display: flex;
    align-items: center;
    span {
      font-weight: bold;
    }
    .switch {
      margin-left: auto;
      margin-right: 12px;
    }
  }
  .link {
    margin: 12px 0;
    .link-content {
      display: flex;
      align-items: center;
      .n-button {
        margin-left: 8px;
      }
    }
  }
  .password {
    margin: 8px 0;
  }
}
</style>
